<template>
  <div class="column" style="height: 100%">
    <div style="height: 15px"></div>
    <!-- 表头部分 -->
    <div class="col-1">
      <q-card flat>
        <div>领用申请报表</div>
        <div style="height: 15px"></div>
        <q-separator spaced="1px" color="#542525" inset size="6px" />
      </q-card>
    </div>
    <!-- 表头部分 -->
    <div class="col-1">
      <!-- 表头的输入框和按键 -->
      <q-card flat>
        <div class="q-gutter-md row justify-around">
          <div class="col-0"></div>
          <q-input
              v-model.trim="box.customerPurchaseOrderId"
              type="text"
              title="自定义订单号"
          >
            <template v-slot:append>
              <q-icon name="gesture" size="80%" />
            </template>
          </q-input>
          <q-input v-model.trim="box.supplierName" type="text" title="供应商">
            <template v-slot:append>
              <q-icon name="person" size="80%" />
            </template>
          </q-input>
          <q-input
              v-model.trim="box.outStockApplyId"
              type="text"
              title="系统订单号"
          >
            <template v-slot:append>
              <q-icon name="view_stream" size="80%" />
            </template>
          </q-input>
          <q-btn
              class="title_font2"
              push
              label="查询"
              ripple
              text-color="teal-9"
          />
          <div class="col-0"></div>
        </div>

        <!-- 操作栏 -->

        <!-- 间距 -->
        <div style="height: 15px"></div>
        <q-separator spaced="1px" color="#542525" inset size="6px" />
      </q-card>
    </div>

    <!-- 表体部分 -->
    <div class="col-3">
      <q-table
          :rows="box.outStockApplyData"
          :columns="columnsReport"
          flat
          :rows-per-page-options="[30]"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              <div class="title_font">{{ col.label }}</div>
            </q-th>
          </q-tr>
        </template>

        <!-- 表体部分 -->
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="outStockApplyId" :props="props">{{ props.row.outStockApplyId }}</q-td>
            <!-- 供应商-->
            <q-td key="supplierName" :props="props">{{  props.row.supplierName }}</q-td>
            <!-- 产品分类-->
            <q-td key="goodsName" :props="props">{{  props.row.goodsName }}</q-td>
            <!-- 产品材质 -->
            <q-td key="goodsMaterial" :props="props">
              {{ props.row.goodsMaterial }}
            </q-td>
            <!-- 产品规格 -->
            <q-td key="goodsSize" :props="props">
              {{ props.row.goodsSize }}
            </q-td>
            <!-- 产品样式 -->
            <q-td key="goodsStyle" :props="props">
              {{ props.row.goodsStyle }}
            </q-td>
            <!-- 订购数量 -->
            <q-td key="outStockApplyQuantity" :props="props">
              {{ props.row.outStockApplyQuantity }}
            </q-td>
            <!-- 适用产品 -->
            <q-td key="forProductName" :props="props">
              {{ props.row.forProductName }}
            </q-td>
            <!-- 备注信息 -->
            <!--            <q-td key="customerMark" :props="props">-->
            <!--              {{ props.row.customerMark }}-->
            <!--            </q-td>-->
            <!-- 状态 -->
            <q-td key="outStockApplyState" :props="props">
              {{ props.row.outStockApplyState }}
            </q-td>
            <!-- 操作 .trim-->
            <q-td key="outStockApplyIndex" :props="props">
              <q-btn
                  icon="delete"
                  @click.stop="boxRowDelete(props.row)"
                  dense
                  flat
                  push
                  class="but_float"
              />
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </div>
  </div>
</template>

<script>
import {reactive, onMounted, toRaw} from "vue";
import {

  getOutStockApply,
  updateOutStockApply,
  DeleteOutStockApply,
  searchOutStockApply
} from "../../API/OutStockApply/OutStockApplyAPI";
import { columnsReport } from "../../API/OutStockApply/OutStockApplyData";
export default {
  data() {
    //获取订单信息
    onMounted(function () {
      box.outStockApplyData.length = 0;
      aa();
      async function aa() {
        let printPart = JSON.stringify({
          "outStockApplyId": box.outStockApplyId
        });
        var res = await getOutStockApply(printPart);
        console.log(res.data);
        box.outStockApplyData = res.data;
      }
    });
    function  boxRowDelete (arow){
      console.log(toRaw(arow.outStockApplyIndex))
      var webReq = JSON.stringify(
          {
            "outStockApplyIndex": toRaw(arow.outStockApplyIndex)+""
          }
      );
      console.log(webReq)
      bb(webReq)
      async function bb(webReq) {
        var res = await deletePurchaseOrder(webReq);
        console.log(res.data);
        location.reload()
      }
    };
    return {
      box,
      boxRowDelete,
      columnsReport,
      Mycolor: ["red", "green", "purple", "orange", "primary", "teal", "white"],
    };
  },
};

const box = reactive({
  isHeader: false, //智能提示卡片
  isPrompts: false, //开启智能提示
  boxDialog: false,
  isDialog: false, //输入错误消息框
  isErrRow: false, //输入不完整消息框
  errRowData: null, //输入不完整消息框内容
  boxIsShow: true,
  SMRIsShow: true,
  trayIsShow: true,
  yesExport: "内销",
  boxPlanDate: "2022/12/12",
  goods: "",
  goodsSize: null,
  goodsStyle: "分块叠高",
  outStockApplyQuantity: null,

  customerPurchaseOrderId: null,
  outStockApplyId: null,
  forProductName: null,
  customerMark: null,
  supplierName: null,
  outStockApplyData: [],
  boxOptions: ["分块叠高", "整条叠高", "实木"],
  outStockApplyIdList: [],
});
</script>
<style>
.title_font2 {
  font-size: 18px;
  font-weight: bolder;
}
</style>
